<template>
	<view class="page-sign-in">
		<view class="header">
			<view class="">
				<u-navbar :is-back="true" title="每日签到" :border-bottom="false" title-color="#fff" title-size="36rpx"
				back-icon-color="#fff" title-bold
				:background="{backgroundColor:'rgba(255,255,255,0)'}">
					<view class="navbar-right u-font-24 u-margin-right-40 u-flex u-col-center" 
					slot="right">
						积分规则<u-icon name="question-circle" size="28" color="#fff" class="u-margin-left-14"></u-icon>
					</view>
				</u-navbar>
			</view>
			<view class="dim"></view>
			<!-- <view class="arc"></view> -->
			<view class="dim-two"></view>
			<view class="integral u-flex u-row-between u-col-top">
				<view class="u-font-23"> 
					当前积分
				</view>
				<u-count-to :start-val="0" :end-val="integral.qdsjf" font-size="66" 
				color="#fff" 
				:bold="true"></u-count-to>
			</view>
			<!-- <view class="sign-btn u-flex u-col-center u-row-center" @click="signInBtn">
				签到
			</view> -->
			<u-button class="sign-btn" type="success" shape="circle" @click="signInBtn">
			{{isSign?'已签':'签到'}}</u-button>
		</view>
		<view class="account">
			<view class="lable">
				连续签到有奖励
			</view>
			<view class="account-info-warp u-flex u-row-between">
				<view class="series-item" v-for="(item,index) in dateArr" :key="index">
					<view class="outside-shadow u-margin-bottom-20 u-flex u-col-center u-row-center">
						<!-- <view class="globe u-flex u-col-center u-row-center" 
						:style="{'background':(globeActive==index?item.bg:'')}"> -->
						<view class="globe u-flex u-col-center u-row-center">
							+{{item.qdjspzjsjg}}
						</view>
					</view>
					<view class="u-font-24" style="font-weight: bold;text-align: center;">
						{{item.qdjspzlxjt == integral.jrqd?'今':item.qdjspzlxjt}}天
					</view>
				</view>
			</view>
		</view>
		<view class="user-common-warp">
			<view class="common-lable">
				赚取积分
			</view>
			<block v-for="(item,index) in earnList">
				<view class="make-item u-flex u-row-between u-col-center"> 
					<view class="make-left u-flex u-col-center">
						<image :src="`/static/common/s-${index}.png`" mode=""></image>
						<view class="second-third-lable-warp u-flex u-col-top u-row-between ">
							<view class="common-second-lable">
								{{item.title}}
							</view>
							<view class="common-third-lable">
								{{item.ndes}}
							</view>
						</view>
					</view>
					<view v-if="item.status != 1" class="make-right u-flex u-row-center u-col-center" @click="goNextPage(item)">
						去完成
					</view>
					<view v-else :class="{grey:item.status == 1}" class="make-right u-flex u-row-center u-col-center" @click="prompt">
						已完成
					</view>
				</view>
				<view v-if="(index+1) != earnList.length" class="line"></view>
			</block>
		</view>
		<u-toast ref="uToast" />
		
	</view> 
</template>

<script>
	import {commonGet} from '@/api/commonapi.js'
	export default{
		data(){
			return{
				nickname:"",
				_creatememid:"",
				dateArr:[
					{ num:2, day:"今", bg:"#ff2828" },
					{ num:3, day:"2", bg:"#ff8727" },
					{ num:4, day:"3", bg:"#ffbc1b" },
					{ num:5, day:"4", bg:"#4fcf4c" },
					{ num:6, day:"5", bg:"#44c9c1" },
					{ num:7, day:"6", bg:"#3f95f6" },
					{ num:10, day:"7", bg:"#b562fc" }
				],
				globeActive:0,
				isSign:false,
				integral:{},
				earnList:[]
			}
		},
		computed:{
			dayTotal(){
				var date = new Date();
				var year = date.getFullYear()
				var month = date.getMonth()
				var d = new Date(year, month+1, 0)
				console.log('month----->',month)
				return d.getDate()
			},
		},
		onLoad() {
			if(this.$store.state.userIn){
				this.nickname = JSON.parse(this.$store.state.userIn).nickname
				this._creatememid = JSON.parse(this.$store.state.userIn).id
			}
			this.changeGlobeBg()
			this.getSignIn()
			this.getEarnList()
		},
		methods:{
			changeGlobeBg(){
				setInterval((item,index)=>{
					if(this.globeActive == 7){
						this.globeActive = 0
					}else{
						this.globeActive += 1
					}
				},1000)
			},
			getSignIn(){
				let _this = this
				let query = {
					ak:_this.$store.state.token,
					cmd:"mMemSignIn_list_procrl",
					para:JSON.stringify({})
				}
				commonGet(query,({Data})=>{
					console.log(Data)
					_this.integral = Data.Datas1[0]
					_this.dateArr = Data.Datas2.reverse()
					let nowDate = new Date().getTime()
					_this.isSign = Data.Data.find((item)=>{
						if(_this.$u.timeFormat(item._createtime, 'yyyy-mm-dd') 
						== _this.$u.timeFormat(nowDate, 'yyyy-mm-dd')){
							return true
						}else{
							return false
						}
					})
				})
			},
			signInBtn(){
				let _this = this
				let query = {
					ak:_this.$store.state.token,
					cmd:"mMemSignIn_add_proc",
					para:JSON.stringify({
						_creatememid:_this._creatememid
					})
				}
				commonGet(query,({Message})=>{
					console.log('res------>',Message)
					if(Message == "操作成功！"){
						_this.$refs.uToast.show({title: '签到成功',type: 'success'})
						_this.getSignIn()
					}else if(Message == "今日已签到"){
						_this.$refs.uToast.show({title: Message,type: 'error'})
					}
				})
			},
			getEarnList(){
				let _this = this
				let query = {
					ak:_this.$store.state.token,
					cmd:"mMemItgTask_list_proc",
					para:JSON.stringify({
						_creatememid:_this._creatememid
					})
				}
				commonGet(query,({Data})=>{
					_this.earnList = Data.Data
				})
			},
			goNextPage(item){
				let _this = this
				let query = {
					ak:_this.$store.state.token,
					cmd:"mMemItgTaskLog_add_proc",
					para:JSON.stringify({
						id:item.id,
						procname:"mMemItgTaskLog_add_proc",
						_creatememid:_this._creatememid
					})
				}
				commonGet(query,(result)=>{  
					if(result.Message == "操作完成" || result.ResponseID == 0){
						_this.$u.route({
							url: '/pages/index/index',
							type:'tab'
						})
					}
				})
			},
			prompt(){
				this.$refs.uToast.show({title: '今日任务已完成',type: 'error'})
			}
		}
	}
</script>

<style lang="scss">
	.line{
		width: 100%;
		height: 1px;
		background-color: #f0f0f0;
	}
	.page-sign-in{
		background-color: #ededed;
		min-height: 100Vh;
		overflow: hidden;
	}
	.header{
		height: 316rpx;
		width: 100%;
		background-color: #ec1111;
		position: relative;
		&::after { 
			content: '';
			width: 140%; 
			height: 140rpx; 
			position: absolute; 
			left: -20%; 
			bottom: -60rpx;  
			border-radius: 0 0 50% 50%; 
			background: #ec1111;
		}
		.dim{
			width: 130rpx;
			height: 130rpx;
			background-color: #fff;
			border-radius: 50%;
			background: linear-gradient(to bottom right,rgba(255,255,255,0.8),rgba(255,255,255,0.3),rgba(255,255,255,0));
			filter:blur(10px);
			position: absolute;
			top: 50rpx;
			left: -10rpx;
		}
		.dim-two{
			z-index: 9;
			width: 100rpx;
			height: 100rpx;
			background-color: #fff;
			border-radius: 50%;
			background: linear-gradient(to bottom right,rgba(255,255,255,0.8),rgba(255,255,255,0));
			filter:blur(10px);
			position: absolute;
			top: 146rpx;
			right: 30rpx;
			border: 1px solid;
		}
		// .arc{
		// 	position: absolute;
		// 	right: -100px;
		// 	bottom: 0;
		// 	width: 900px;
		// 	height: 900px;
		// 	border: 1px solid rgba(255,255,255,0.1);
		// 	border-radius: 100%;
		// 	background: linear-gradient(to top left,rgba(255,255,255,0.3),rgba(255,255,255,0));
		// }
		.navbar-right{
			color: #fff;	
		}
		.integral{
			z-index: 10;
			width: 166rpx;
			height: 110rpx;
			position: absolute;
			left: 30rpx;
			top: 126rpx;
			flex-direction: column;
			color: #fff;
		}
		.sign-btn{
			z-index: 10;
			width: 160rpx;
			height: 60rpx;
			// border-radius: 30rpx;
			background-color: #e9c966;
			position: absolute;
			top: 150rpx;
			right: 30rpx;
			font-size: 30rpx;
			color: #fff;
			border: none;
		}
	}
	.account{
		transform: translateY(-30rpx);
		z-index: 10;
		margin: 0 30rpx 0 30rpx;
		border-radius: 20rpx;
		padding: 20rpx 34rpx;
		background-color: #fff;
		.lable{
			font-size: 30rpx;
			font-weight: bold;
		}
		.account-info-warp{
			overflow-x: auto;
			.series-item{
				margin: 36rpx 10rpx 0 10rpx;
				.outside-shadow{
					width: 62rpx;
					height: 62rpx;
					border-radius: 100%;
					background-color: #ffdbdb;
					box-shadow: 0 6rpx 10rpx rgba(255,38,38,0.3);
					.globe{
						width: 56rpx;
						height: 56rpx;
						background: linear-gradient(to bottom right,#fff,#ff3939,#ff2626);
						border-radius: 100%;
						color: #fff;
						font-size: 26rpx;
					}
				}
			}
			.series-item:nth-child(2){
				.outside-shadow{
					background-color: #ffe0c7;
					box-shadow: 0 6rpx 10rpx rgba(255,136,41,0.5);
					.globe{
						background: linear-gradient(to bottom right,#fff,#ffab67,#ff8727);
					}
				}
			}
		}
		.series-item:nth-child(3){
			.outside-shadow{
				background-color: #fcefcf;
				box-shadow: 0 6rpx 10rpx rgba(255,189,29,0.5);
				.globe{
					background: linear-gradient(to bottom right,#fff,#ffc947,#ffbc1a);
				}
			}
		}
		.series-item:nth-child(4){
			.outside-shadow{
				background-color: #c4fac2;
				box-shadow: 0 6rpx 10rpx rgba(78,207,75,0.5);
				.globe{
					background: linear-gradient(to bottom right,#fff,#80dd7e,#4fcf4c);
				}
			}
		}
		.series-item:nth-child(5){
			.outside-shadow{
				background-color: #c1eae7;
				box-shadow: 0 6rpx 10rpx rgba(68,201,193,0.5);
				.globe{
					background: linear-gradient(to bottom right,#fff,#6cd5cf,#44c9c1);
				}
			}
		}
		.series-item:nth-child(6){
			.outside-shadow{
				background-color: #c3dbf7;
				box-shadow: 0 6rpx 10rpx rgba(64,149,246,0.5);
				.globe{
					background: linear-gradient(to bottom right,#fff,#69acf8,#4095f6);
				}
			}
		}
		.series-item:nth-child(7){
			.outside-shadow{
				background-color: #e2c9f7;
				box-shadow: 0 6rpx 10rpx rgba(181,98,252,0.5);
				.globe{
					background: linear-gradient(to bottom right,#fff,#bf77fc,#b562fc);
				}
			}
		}
	}
	.user-common-warp{
		margin: 0 30rpx 30rpx 30rpx;
		padding: 36rpx 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		.common-lable{
			font-size: 30rpx;
			font-weight: bold;
		}
		.make-item{
			height: 145rpx;
			width: 100%;
			.make-left{
				image{
					width: 78rpx;
					height: 78rpx;
				}
				.second-third-lable-warp{
					flex-direction: column;
					height: 70rpx;
					margin-left: 34rpx;
					.common-second-lable{
						font-size: 30rpx;
					}
					.common-third-lable{
						font-size: 22rpx;
						color: #999999;
					}
				}
				
			}
			.make-right{
				width: 144rpx;
				height: 55rpx;
				border-radius: 55rpx;
				border: 1px solid #ec0d0d;
				color: #ec0d0d;
			}
			.grey{
				border: 1px solid #ebebeb;
				color: #999;
			}
			
		}
	}
	
</style>
   